<include file="public@header" />
<style>

	.controls,.col-md-2 {

	}

	.minwidth {
		width: 70px !important;
		padding: 6px 2px;
	}

	.w70{
		width:  80px !important;}
	.w100{
		width: 100px !important;
	}
	.inputw ,.w80{
		width: 80px !important;
	}
	.w160{
		width: 140px !important;
	}

	.marleft {
		margin-left: 90px !important;
	}


</style>
</head>
<body>
	<php>$type=''</php>
	<div class="wrap">
		<ul class="nav nav-tabs">
			<li><a href="{:url('Rock/product')}">石材产品库</a></li>
			<li><a href="{:url('Rock/producttypeadd')}">新增石材产品</a></li>
			<li class="active"><a href="{:url('Rock/productsp')}">新增商品墓</a></li>
		</ul>
		<form method="post" class="form-horizontal js-ajax-form" action="{:url('Rock/productsp')}" style="width:100%; float:left">
			<fieldset>
				<input type="hidden" name="pro_type" value="1">
				<div class="p_title">
					<span class="span_title">基础信息</span>
				</div>
				<div class="control-group1-p">
					<div class="control-group" style="float:left;margin-bottom: -20px;margin-left: -10px;">
						<label class="control-label">状态:</label>
						<div class="controls">
							<select class="form-control" name="mb[pro_status]" style="width: 136px">
								<option value="1">启用</option>
								<option value="2">停用</option>
							</select>
						</div>
					</div>
					<div class="form-group"  >
						<label class="control-label">在产状态:</label>
						<div class="col-md-2">
							<select class="form-control" name="mb[if_create]" style="width: 136px">
								<option value="1">在产</option>
								<option value="2">停产</option>
							</select>
						</div>
					</div>
					<div class="form-group" >
						<label class="control-label">产品名称:</label>
						<div class="col-md-2" style="width: 12%">
							<input type="text" class="form-control" name="mb[pro_name]" required value="商品墓001">
						</div>
						<label class="control-label inputw">规制:</label>
						<div class="col-md-2" style="width: 8%">
							<select class="form-control" name="mb[regulation]"style="width: 100px">
								<option value="1">单穴</option>
								<option value="2">双穴</option>
								<option value="3">三穴</option>
							</select>
						</div>
						<label class="control-label inputw">碑型:</label>
						<div class="col-md-2" style="width: 8%">
							<select class="form-control" name="mb[stele_type]"style="width: 100px">
								<option value="1">立碑</option>
								<option value="2">卧碑</option>
							</select>
						</div>
						<label class="control-label" style="width: 90px">占地长度:</label>
						<div class="col-md-2" style="width: 11%">
								<input type="text" class="form-control" style="width: 110px"  name="mb[pro_length]" required value="12"> mm
						</div>
						<label class="control-label" style="width: 90px">占地宽度:</label>
						<div class="col-md-2" style="width: 11%">
							<input type="text" class="form-control" style="width: 110px"  name="mb[pro_width]" required value="21"> mm
						</div>
						<label class="control-label"style="width: 90px">墓碑总高:</label>
						<div class="col-md-2" style="width: 11%">
							<input type="text" class="form-control" style="width: 110px"  name="mb[pro_height]" required value="12"> mm
						</div>
					</div>
					<div class="form-group" >
						<label class="control-label">产品图</label>
						<div class="col-md-2" style="width: 24.1%">
							<input type="hidden" name="mb[pro_photo]" id="thumb" value="">
							<a href="javascript:uploadOneImage('图片上传','#thumb');">
								<h5 class="btn btn-primary">上传</h5>
							</a>
							<img src="" id="thumb-preview"   onclick="parent.imagePreviewDialog(this.src);"  width="40" style="cursor: hand"/>
							<input type="button" class="btn btn-sm" onclick="$('#thumb-preview').attr('src','');$('#thumb').val('');return false;" value="取消图片">
						</div>
						<label class="control-label" style="width: 90px">墓碑换新单价:</label>
                        <div class="col-md-2" style="width: 11%">
							<input type="text" class="form-control" style="width: 110px" name="mb[pro_price]" required value="">
						</div>
					</div>
				</div>
			</fieldset>
			<fieldset>
                <div class="p_title">
                	<span class="span_title">墓碑信息</span>
                </div>
                <div class="control-group1-p">
					<div class="form-group">
						<label class="control-label" style="width: 140px;"></label>
						<div class="col-md-2">
							<input type="text" class="form-control minwidth" disabled value="宽">
							<input type="text" class="form-control minwidth" disabled value="高">
							<input type="text" class="form-control minwidth" disabled value="厚">
						</div>
					</div>
					<div id="details" data-count=""></div>
					<div class="form-group">
						<div class="col-md-10">
							<label class="control-label w160">基础：</label>
							<div class="col-md-8">
								<select class="form-control" name="mb[pro_base]"   id="select_jichu" style="margin-left: -13px">
									<option value="1">整石</option>
									<option value="2">贴面</option>
								</select>
							</div>
						</div>
					</div>
					<div id="basics" data-count="0"></div>
					<div id="cover"></div>
					<div class="form-group">
						<div class="col-md-10">
						<label class="control-label w160">有无栏杆：</label>
						<div class="col-md-8">
							<select class="form-control" name="mb[pro_railing]" id="select_langan"style="margin-left: -13px">
								<option value="1">有</option>
								<option value="2">无</option>
							</select>
						</div>
						</div>
					</div>
					<div id="railing" data-count=""></div>
					<div class="form-group" style="width:100%">
						<div class="col-md-10">
						<label class="control-label w160">有无附件：</label>
						<div class="col-md-8">
							<select class="form-control" name="mb[pro_annex]" id="select_fujian"style="margin-left: -13px">
								<option value="1">有</option>
								<option value="2">无</option>
							</select>
						</div>
						</div>
					</div>
					<div id="annex" data-count=""> </div>
                </div>
			</fieldset>
			<div class="form-actions">
				<button type="submit" class="btn btn-primary js-ajax-submit" >{:lang('ADD')}</button>
				<a class="btn btn-default" href="javascript:history.back(-1);">{:lang('BACK')}</a>
			</div>            
		</form>
	</div>
    <script type="text/javascript" src="__STATIC__/js/admin.js?v={:time()}"></script>
	<script type="text/javascript" src="__STATIC__/js/layer/layer.js"></script>
	<script>
		$(document).ready(function(){
			var json = {$annexJson},
			    partjson = {$partJson},
			    catejson = {$cateJson},
			    html = "";
			$.each(json, function(i, n){
				html += "<option value='"+n.id+"'>"+n.name+"</option>";
			})
			var catehtml = "<option value=''>请选择材料种类</option>";
			$.each(catejson, function(i, n){
				catehtml += "<option value='" + n.id + "'  data-stuff_money='"+n.stuff_money+"' data-action='"+n.stuff_unit+"'>" + n.name + "</option>";
			})

			$(function () {
				$('#details').append(getArrayHtml('details',partjson.details));

				var num =partjson.details.length+1;

				$('#basics').append(getArrayHtml('details',partjson.basics.zs,num));
				$('#cover').append(getArrayHtml('cover',partjson.cover));
				$('#railing').append(getArrayHtml('railing',partjson.railing));
				$('#annex').append(getHtmlAnnex(1));
			})

			$('#select_jichu').change(function () {
				var k = $(this).val(),b_arr=[],basics='';
				var num =partjson.details.length+1;
				$('#basics').html('');
				if (k==1){b_arr = partjson.basics.zs;
				} else {b_arr = partjson.basics.tm;}
				basics = getArrayHtml('details',b_arr,num)
				$('#basics').append(basics);
			})
			$("#select_langan").change(function () {
				$('#railing').html('');
				if ($(this).val() == 1) {
					$('#railing').append(getArrayHtml('railing',partjson.railing));
				}
			});

			$('#select_fujian').change(function () {
				$('#annex').html('');
				if ($(this).val() == 1) {
					$('#annex').append(getHtmlAnnex(1));
				}
			})

			$(document).on('click', '#del_fujian', function () {
				$(this).parents("div[name='d_al']").remove();
			});
			$(document).on('click', '#add_fujian', function () {
				var ik = parseInt($(this).data('k'))+1;
				console.log(ik)
				$(this).data('k',ik)
				$(this).parent().parent("div").after(getHtmlAnnex(ik));
			});


			var getArrayHtml = function(name,b_arr_json,num=0){
				var arr_html ='',ii=0,p_num=6000;
				$.each(b_arr_json, function (i, n) {
					ii= parseInt(num)+i;
					arr_html+='<div class="form-group part_base" name="base">\n' +
							'       <div class="col-md-2" style="width: 24%;padding-right: 0;padding-left: 17px;">\n' +
							'           <label class="control-label w160" >'+n.iname+'：</label>\n' +
							'           <input type="hidden" name="'+name+'['+ii+'][itype]" value="'+n.itype+'">\n' +
							'           <input type="hidden" name="'+name+'['+ii+'][iname]" value="'+n.iname+'">\n' +
							'           <input type="hidden" name="'+name+'['+ii+'][isort]" value="'+n.isort+'">\n' +
							'           <input type="text" class="form-control minwidth iwidth" name="'+name+'['+ii+'][iwidth]" placeholder="宽" value="'+n.iwidth+'">\n' +
							'           <input type="text" class="form-control minwidth iheight" name="'+name+'['+ii+'][iheight]" placeholder="高" value="'+n.iheight+'">\n' +
							'           <input type="text" class="form-control minwidth ithick" name="'+name+'['+ii+'][ithick]" placeholder="厚" value="'+n.ithick+'"> mm\n' +
							'       </div>\n' +
							'       <div class="col-md-2" style="width: 17%">\n' +
							'           <label class="control-label inputw">材料种类：</label>\n' +
							'           <div class="col-md-4">\n' +
							'               <select class="form-control icate" name="'+name+'['+ii+'][icate]">\n' +catehtml+ '</select>\n' +
							'           </div>\n' +
							'       </div>\n' +
							'       <div class="col-md-2" style="width:12%">\n' +
							'           <label class="control-label w70">数量：</label>\n' +
							'           <div class="col-md-4">\n' +
							'               <input type="text" class="form-control inumber" name="'+name+'['+ii+'][inumber]" style="width:100px;"  value="'+n.inumber+'">\n' +
							'           </div>\n' +
							'       </div>\n' +
							'       <div class="col-md-2" style="width:13%">\n' +
							'           <label class="control-label w100">材料价格：</label>\n' +
							'           <div class="col-md-4">\n' +
							'               <input type="text" class="form-control imaterial_price" name="'+name+'['+ii+'][imaterial_price]" style="width:100px;" value="'+n.imaterial_price+'">\n' +
							'           </div>\n' +
							'       </div>\n' +
							'       <div class="col-md-2" style="width:13%">\n' +
							'           <label class="control-label w100">维修单价：</label>\n' +
							'           <div class="col-md-4">\n' +
							'               <input type="text" class="form-control irepair_price" name="'+name+'['+ii+'][irepair_price]" style="width:100px;" value="'+n.irepair_price+'">\n' +
							'           </div>\n' +
							'       </div>\n' +
							'       <div class="col-md-2" style="width:12%">\n' +
							'           <label class="control-label w100">更换单价：</label>\n' +
							'           <div class="col-md-4">\n' +
							'               <input type="text" class="form-control ichange_price" name="'+name+'['+ii+'][ichange_price]" style="width:100px;" value="'+n.ichange_price+'">\n' +
							'           </div>\n' +
							'       </div>\n' +
							'   </div>';
				})
				return arr_html;
			}

			var getHtmlAnnex = function(i){
				if (i==1){
					var  add_fujian =' <div class="btn btn-primary" id="add_fujian"  data-k="'+i+'">添加附件</div>';
				} else {
					var   add_fujian =' <div class="btn btn-primary" id="del_fujian"  data-k="'+i+'">删除附件</div>';
				}
				return  '<div class="form-group part_base" name="base">\n' +
						'      <div class="col-md-2" style="width: 24%;padding-right: 0;padding-left: 17px;" >\n' +
						'       <label class="control-label w160">选择附件：</label>\n' +
						'       <div class=" ">\n' +
						'           <select class="form-control"  name="annex['+i+'][annex_id]">\n' +html+
						'           </select>\n' +
						'       </div>\n' +
						'   </div>\n' +
						'   <div class="col-md-2" >\n' +
						'       <label class="control-label inputw">数量：</label>\n' +
						'       <div class="col-md-2">\n' +
						'           <input type="text" class="form-control" style="width: 70px" name="annex['+i+'][anumber]" value="1">\n' +
						'       </div>\n' +
						'   </div>\n' +
						'   <div class="col-md-2" name="fujian" style=" width:50%">\n' +add_fujian+
						'   </div>\n' +
						'</div>';
			}


			$(document).on('blur',".iwidth",function(){
				var obj = $(this).closest('.part_base');
				price_count(obj)
			});
			$(document).on('blur',".iheight",function(){
				var obj = $(this).closest('.part_base');
				price_count(obj)
			});
			$(document).on('blur',".ithick",function(){
				var obj = $(this).closest('.part_base');
				price_count(obj)
			});
			$(document).on('blur',".imaterial_price",function(){
				var obj = $(this).closest('.part_base');
				price_count(obj)
			});

			// 主要
			$(document).on('change',".icate",function(){
				var obj = $(this).closest('.part_base');
				var stuff_money = obj.find('.icate').children('option:selected').data('stuff_money');
				obj.find('.imaterial_price').val(stuff_money)
				price_count(obj)
			});

			var price_count = function(obj){
				var iwidth = obj.find('.iwidth').val()/1000,
						iheight = obj.find('.iheight').val()/1000,
						ithick = obj.find('.ithick').val()/1000,
						imaterial_price =  obj.find('.imaterial_price').val();
				console.log(iwidth)
				console.log(iheight)
				console.log(ithick)
				var change_price = 0;
				if(iwidth != '' && iheight !='' && ithick !=''  && imaterial_price != ''){
					change_price = iwidth*iheight*ithick*imaterial_price;
					change_price = change_price.toFixed(2);
				}
				obj.find(".ichange_price").val(change_price);
			};
		})
	</script>
